<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>考勤机设置</title>
    <link rel="stylesheet" type="text/css" href="../lib/laydate.css"/>
    <link rel="stylesheet" type="text/css" href="../lib/pagination/style/pagination.css"/>
    <link rel="stylesheet" type="text/css" href="../css/base.css"/>
    <script type="text/javascript" src="../js/common/language.js" ></script>
    <script type="text/javascript" src="../js/news/jquery-1.9.1.js"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.ui.widget.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.iframe-transport.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.fileupload.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/news/page.js"></script>
    <script src="../lib/laydate/laydate.js"></script>
    <script src="../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/ajaxupload.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jquery.form.min.js"></script>
    <script src="../lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/layer/layer.js?20201106"></script>
    <style>
        a{
            text-decoration: none;
            color: #207bd6;
        }

        .buttonDiv>div{
            float: left;
            margin: 20px 10px;
        }
        .fileDone select{
            width: 160px;
            height:28px;
        }
        #tr_td tr:nth-child(odd){
            background-color: #fff;
        }
        input{
            float: none;
            width: 200px;
            height: 30px;
        }
        select{
            width: 200px;
            height: 30px;
        }
        textarea{
            width: 260px;
            height: 50px;
            vertical-align: middle;
        }
        a{
            text-decoration: none;
            color: #207bd6;
        }
        .newTbale tr td{
            border-right: #ccc 1px solid;
            padding: 5px;
        }
        .main{
            width: 60%;
            margin: 0 auto;
        }
        .main table{
            width: 100%;
        }
        .main table tr td{
            text-align: left;
            padding: 8px;
            border-right: #ccc 1px solid;
        }
        .saveBtn{
            width: 40px;
            height: 28px;
            background: #2b7fe0;
            border-radius: 4px;

            cursor: pointer;
            text-align: center;
            color: #ffffff;
            line-height: 28px;

        }
        .return{
            width: 40px;

            height: 28px;
            background: #2b7fe0;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            color: #ffffff;
            line-height: 28px;
            margin: 0 20px;
        }
        .return a{
            color: #ffffff;

        }
    </style>
</head>

<body>
<div class="bx">

    <div class="navigation  clearfix juMange" id="maSet" style="display: block;">
        <div class="left" style="margin-left: 30px">
            <img src="/img/commonTheme/${sessionScope.InterfaceModel}/icon_manageFile.png">
            <div class="news">考勤机设置</div>
        </div>
        <div style="clear: both;"></div>
        <div class="wrap" style="margin-left: 0;padding: 0 20px;">
            <div class="main">
                <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
                    <tr>
                        <td colspan="2" style="text-align: center;font-size: 13pt;font-weight: bold;">考勤机及数据库设置</td>
                    </tr>
                    <tr>
                        <td>考勤机型号：</td>
                        <td>
                            <select name="machingBrand" id="machingBrand">
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>考勤机数据库类型：</td>
                        <td>
                            <select name="databaseType" id="databaseType">
                                <option value="access">access</option>
                                <option value="mysql">mysql</option>
                            </select>
                        </td>
                    </tr>
                    <tr class="accHide">
                        <td>access数据文件路径：</td>
                        <td><input type="text" style="width: 350px;" name="accessPath" value=""></td>
                    </tr>
                    <tr class="accHide">
                        <td>启用说明：</td>
                        <td>
                            <p>1、到人力资源->人力资源设置->考勤设置，考勤方式选择考勤机。</p>
                            <p>2、到OA的系统管理->定时任务管理->间隔执行任务中，启用同步考勤机数据。</p>
                            <p>3、要求OA中人力资源->人力资源设置->考勤设置中的排班类型、登记时间段，与考勤机中的相应人的排班、时段一致。</p>
                            <p>4、如果考勤机管理软件采用acces数据库，需要将该考勤软件安装在OA服务器上。</p>
                            <p>5、指定好access数据库文件路径，如：C:/Program Files/Att2008/att2000.mdb。</p>
                            <p>6、仅支持中控iclock660, 8.0以下的版本，对于其它版本或不支持mysql/access数据库的版本或其它型号或品牌的考勤机与OA的集成，需要定制开发。</p>
                        </td>
                    </tr>
                    <tr class="sqlHide" style="display: none;">
                        <td>考勤机数据库ip地址：</td>
                        <td>
                            <input type="text" name="databaseIp" value="">
                            <span style="color: #ff0000;">（注意：Mysql数据库服务不在本机，则需要授权OA服务器计算机有权连接）</span>
                        </td>
                    </tr>
                    <tr class="sqlHide" style="display: none;">
                        <td>考勤机数据库端口：</td>
                        <td>
                            <input type="text" name="databasePort" value="">
                            <span style="color: #ff0000;">（说明：考勤机数据库端口，一般默认为：“17770”）</span>
                        </td>
                    </tr>
                    <tr class="sqlHide" style="display: none;">
                        <td>数据库名称：</td>
                        <td>
                            <input type="text" name="databaseName" value="zkeco_db">
                            <span style="color: #ff0000;">（说明：考勤机数据库名称，一般默认为：“zkeco_db”）</span>
                        </td>
                    </tr>
                    <tr class="sqlHide" style="display: none;">
                        <td>数据库用户名：</td>
                        <td>
                            <input type="text" name="databaseUser" value="">
                            <span style="color: #ff0000;">（说明：考勤机数据库用户名，一般默认为：“root”，密码一般为空不需要填写）</span>
                        </td>
                    </tr>
                    <tr class="sqlHide" style="display: none;">
                        <td>数据库密码：</td>
                        <td>
                            <input type="password" name="databasePass" value="">
                            <a href="javascript:;">测试连接</a>
                        </td>
                    </tr>
                    <tr class="sqlHide" style="display: none;">
                        <td>启用说明：</td>
                        <td>
                            <p style="color: #ff0000;">1、以上需要填写的全部内容必须保证无误，否则将导致考勤数据无法同步到OA中以及系统出错。</p>
                            <p style="color: #ff0000;">2、到OA的系统管理->定时任务管理->定点执行任务中，启用同步考勤机数据。</p>
                            <p style="color: #ff0000;">3、要求OA中人力资源->人力资源设置->考勤设置中的排班类型、登记时间段，与考勤机中的相应人的排班、时段一致。</p>
                            <p style="color: #ff0000;">4、其他考勤机与OA的集成，需要定制开发。</p>
                        </td>
                    </tr>
                    <tr>
                        <td style="border: none">

                        </td>
                        <td style="margin-left: 150px;display: flex;">
                            <div class="saveBtn">保存</div>
                            <div class="return"><a href="/attendanceWay/attindex">返回</a></div>
                        </td>
                    </tr>

                </table>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url: "/attendMachine/selectByMachine",
            type:'get',
            dataType:"JSON",
            success:function(data){
                var str;
                for (var i=0;i<data.object.length;i++){
                    str += '<option value="'+data.object[i].codeName+'">'+data.object[i].codeName+'</option>';
                }
                $('#machingBrand').append(str);

            }
        })
        $('#databaseType').change(function () {
            var KaoQinType=$('#databaseType option:selected').val();
            if(KaoQinType == 'access'){
                $(".sqlHide").hide();
                $(".accHide").show();
                $('input[name="databaseIp"]').val('');
                $('input[name="databasePort"]').val('');
                $('input[name="databaseName"]').val('');
                $('input[name="databaseUser"]').val('');
                $('input[name="databasePass"]').val('');
            }else if(KaoQinType == 'mysql'){
                $(".sqlHide").show();
                $(".accHide").hide();
                $('input[name="accessPath"]').val('')
            }
        })
//        保存
        $('.saveBtn').click(function () {
            var data={
                machineBrand:$('#machingBrand option:selected').val(),
                databaseType:$('#databaseType option:selected').val(),
                accessPath:$('input[name="accessPath"]').val(),
                databaseIp:$('input[name="databaseIp"]').val(),
                databasePort:$('input[name="databasePort"]').val(),
                databaseName:$('input[name="databaseName"]').val(),
                databaseUser:$('input[name="databaseUser"]').val(),
                databasePass:$('input[name="databasePass"]').val()
            }
            $.ajax({
                type:'post',
                url:'/attendMachine/editMachine',
                dataType:'json',
                data:data,
                success:function(res){
                    if(res.flag){
                        $.layerMsg({content:'添加成功！',icon:1})
                    }else{
                        $.layerMsg({content:'添加失败！',icon:2})
                    }
                }
            })
        });
//        回显
        $.ajax({
            type:'get',
            url:'/attendMachine/selMachine',
            dataType:'json',
            success:function (res) {
                var data=res.object;
                $('#machingBrand').val(data.machineBrand);
                $('#databaseType').val(data.databaseType);
                if(data.databaseType == 'access'){
                    $(".sqlHide").hide();
                    $(".accHide").show();
                    $('input[name="accessPath"]').val(data.accessPath);
                }else {
                    $(".sqlHide").show();
                    $(".accHide").hide();
                    $('input[name="databaseIp"]').val(data.databaseIp);
                    $('input[name="databasePort"]').val(data.databasePort);
                    $('input[name="databaseName"]').val(data.databaseName);
                    $('input[name="databaseUser"]').val(data.databaseUser);
                    $('input[name="databasePass"]').val(data.databasePass);
                }
            }
        })

    })
</script>
</body>
</html>
